【第442期】手机百度移动适配切图解决方案介绍
前言
现在移动设备越来越大，在项目中常见的一个例子就是要兼顾小屏幕的问题，导致在大屏下过多的留白显得整个页面“空”了。同时昨天早读君也遇到了这么一个问题，设计师以640px来设计活动页，但现在项目设备宽屏的占50%，那这个时候要怎么处理呢？类似的情况很多。
所以今天我们就来看看手百关于这块是采用什么方案处理？
正文从这开始～
我们知道移动开发上面有个设备像素比：window.devicePixelRatio，现在在开发页面的时候，一定会在head中添加个viewport的meta类似下面的代码：
但是随着手机屏幕越来越大，于是页面会遇见下面的问题，手机屏幕越大，右边留白越多，字体越小也不清晰，影响体验：
介绍下REM
rem是以document.documentElement（即<html>标签）的font-size为基准的，举例说明：
html的font-size：10px
那么1rem = 10px
手百Rem切图方案
为了切图方便，我们手百使用了Rem切图，首先类似淘宝的flexible方案，会在页面head中引入一个flexible.js。
为了计算方便，我们将documentElement的font-size设置为页面宽度的10%，代码如下：
同时配合js获取dpr动态设置的viewport。切图布局的时候，需要计算rem，为了方便我们使用sass写了一个rem函数和mixin：
ps：详细这部分可以查看原文
sass变量 $rem-baseline 是基准值，以设计图宽度/10为准，这样设计后，就可以直接用视觉稿的尺寸大小切图了。
举个例子
720px的视觉稿中有个360x360的div。
普通切图
使用普通方法切页面，设置：
这样采用iPhone5为基准手机切图，需要计算：需要切图的图层width/(视觉稿width/基准手机设备宽度)即：360/(720/320)=160px
Rem切图
设置$rem-baseline为720/10，即72px
使用rem进行计算：width: rem(360px)
算一算
html字体：1rem=640px/10=64px
viewport：scale = 1/dpr = 0.5
css的宽：360px/72px = 5rem
5rem 64px 0.5= 160px
字体问题
字体的大小是根据<body>标签的font-size，为了计算方便，$font-baseline设置为12px，所以需要根据不同的设备像素比设置不同的font-size，然后配合sass的mixin fontsize设置字体大小
总结
关于设备上面的切图就说到这里，想了解更多，看下我之前的内部分享：
大家的方案都是异曲同工，有兴趣的可以了解看看。
关于本文
作者：@三水清
原文链接：http://dwz.cn/2lxkWT
长按图片识别图中二维码